<template>
  <div class="habit-check">
    <div class="habit-check-header">
      <div class="pre-month" @click="handlePreMonth">
        <i class="ri-arrow-left-s-line"></i>
      </div>
      <div class="current-month">{{ currentMonth }}</div>
      <div class="next-month" @click="handleNextMonth">
        <i class="ri-arrow-right-s-line"></i>
      </div>
    </div>
    <div class="habit-check-body">
      <div class="weeks">
        <div class="week" v-for="i in WEEKS_MAP" :key="i">周{{ i }}</div>
      </div>
      <div class="days">
        <div
          class="day"
          v-for="(day, index) in DAYS"
          :key="index"
          :class="{
            'other-month': day.isOtherMonth,
            'current-day': day.date.isSame(dayjs(), 'day'),
            'is-checked': store.currentHabit?.checkInRecords.includes(day.date.format('YYYY-MM-DD'))
          }"
        >
          <div class="text">{{ day.day }}</div>
          <div class="check-btn" @click="handleCheck(day.date)">
            <i class="ri-check-line"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import habitStore from '@renderer/store/habit'
import dayjs, { Dayjs } from 'dayjs'
import { computed, ref, toRaw } from 'vue'

const store = habitStore()

const WEEKS_MAP = ['日', '一', '二', '三', '四', '五', '六']

const currentDate = ref<Dayjs>(dayjs())

const currentMonth = computed(() => {
  return `${currentDate.value.isSame(dayjs(), 'year') ? '' : `${currentDate.value.year()}年`} ${currentDate.value.month() + 1}月`
})

const DAYS = computed(() => {
  const lastMonthDays: any[] = []
  const currentMonthDays: any[] = []
  const nextMonthDays: any[] = []
  // 获取这个月第一天是周几
  const firstDay = currentDate.value.date(1).day()
  for (let i = 0; i < firstDay; i++) {
    lastMonthDays.push({
      day: dayjs(currentDate.value.subtract(1, 'month').endOf('month')).date() - firstDay + i + 1,
      isOtherMonth: true,
      date: dayjs(
        currentDate.value
          .subtract(1, 'month')
          .endOf('month')
          .subtract(firstDay - i - 1, 'day')
      )
    })
  }
  for (let i = 1; i <= currentDate.value.daysInMonth(); i++) {
    currentMonthDays.push({
      day: i,
      isOtherMonth: false,
      date: dayjs(currentDate.value.date(i))
    })
  }
  const nextMonthFirstDay = currentDate.value
    .date(currentDate.value.daysInMonth())
    .add(1, 'day')
    .date()
  for (
    let i = 1;
    i <= 42 - lastMonthDays.length - currentMonthDays.length - nextMonthFirstDay;
    i++
  ) {
    nextMonthDays.push({
      day: i,
      isOtherMonth: true,
      date: dayjs(
        currentDate.value
          .add(1, 'month')
          .startOf('month')
          .add(i - 1, 'day')
      )
    })
  }
  return [...lastMonthDays, ...currentMonthDays, ...nextMonthDays]
})

const handlePreMonth = () => {
  currentDate.value = currentDate.value.subtract(1, 'month')
}

const handleNextMonth = () => {
  if (currentDate.value.isSame(dayjs(), 'month')) {
    return
  }
  currentDate.value = currentDate.value.add(1, 'month')
}

const handleCheck = (date: Dayjs) => {
  if (!store.currentHabit || date.isAfter(dayjs())) {
    return
  }
  if (store.currentHabit.checkInRecords.includes(date.format('YYYY-MM-DD'))) {
    store.currentHabit.checkInRecords.splice(
      store.currentHabit.checkInRecords.indexOf(date.format('YYYY-MM-DD')),
      1
    )
  } else {
    store.currentHabit.checkInRecords.push(date.format('YYYY-MM-DD'))
  }
  window.api.updateHabitData(toRaw(store.currentHabit))
}
</script>

<style scoped>
.habit-check {
  width: 100%;
  margin-top: 20px;
  border-radius: var(--xz-main-radius);
  background-color: var(--xz-card-bg);
  padding: 20px;
}

.habit-check-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.habit-check-header i {
  font-size: 1.5rem;
  color: #888;
  cursor: pointer;
}

.current-month {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--xz-fontcolor);
}

.habit-check-body {
  width: 100%;
}

.weeks {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 8px;
}

.week {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  color: #999;
  padding: 5px 0;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 8px;
}

.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  i {
    opacity: 0;
  }

  .text {
    color: var(--xz-fontcolor);
  }

  &.other-month {
    .text {
      opacity: 0.5;
    }
  }

  &.current-day {
    .text {
      color: var(--xz-lighttext);
    }
  }

  &.is-checked {
    .check-btn {
      background-color: var(--xz-theme);
      color: white;
    }

    i {
      opacity: 1;
    }
  }
}

.text {
  font-size: 10px;
  color: #333;
}

.highlight {
  color: #4285f4;
}

.check-btn {
  background-color: var(--xz-secondbg);
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
</style>
